<template>
    <div style="height: 100%;margin-top:125px;">
        <div  v-for="item in funclist" :key="item">
            <div v-if="item.type=='basic'"  @click="current_model=item.value" 
                  :class="{'active':current_model==item.value ,'func_item': true}" >
                 <Icon  style="font-size: 25px;"  :type="item.icon" /> <span> {{item.name}}</span>
            </div>
             <div v-if="item.type=='expand'"  @click="change_Expand(item.value)" 
                  :class="{'active':current_model==item.value ,'func_item': true}" >
                 <Icon  style="font-size: 25px;"  :type="item.icon" /> <span> {{item.name}}</span>
            </div>
            
        </div>
    </div>

</template>

<script setup>
import { ref, defineModel, watch, inject } from 'vue';
let current_model = defineModel('current_model', { required: true, default: 'message' })
let current_expand_model = defineModel('current_expand')
let show_expand=defineModel('show_expand', { required: true, default: false })
const chat=inject('chat')()
watch(()=>current_model.value, (newVal, oldVal) => {
    // console.log(newVal, oldVal)
})

const change_Expand = (value) => {
    // 由于expand的内容可拓展,采用仓库配对方法
    if (chat.value.get_current_expand_model() == value) {
        // 认为是同一模块点击,关闭模块
        current_expand_model.value = null
        show_expand.value = false
        chat.value.set_current_expand_model(null)
    } else { 
        current_expand_model.value = value
        show_expand.value = true
        // 切换模块更新状态
        chat.value.set_current_expand_model(value)
    }   
}
    
let funclist = ref([
    {
        'name': '搜索',
        'value': 'search',
        'icon': 'md-search',
        'type':'expand'
    },
    {
        'name': '消息',
        'value': 'message',
        'icon': 'ios-chatboxes-outline',
        'type':'basic'
    },
     {
        'name': "好友",
        'value': 'friends',
         'icon': 'md-contact',
        'type':'basic'
    }, {
        'name': '群聊',
        'value': 'group',
         'icon': 'md-contacts',
        'type':'basic'
    },{
        'name': '事务',
        'value': 'transaction',
        'icon': 'ios-list-box-outline',
        'type':'basic'
    },
    // {
    //     'name': '设置',
    //     'value': 'setting',
    //     'icon': 'md-settings',
    //     'type':'basic'
    // },
])
</script>

<style  scoped>
.func_item{
    display: flex;
    justify-content: left;
    height: 25%;
    flex-direction: column;
    padding: 0 3px;
    align-items: center;
    font-size: 15px;
    color: #666666;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 20px;
    user-select: none;
}
.active{
    color: #96c5f7;
    border-radius: 5px;
    padding: 0 5px;
}




</style>